<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ page isELIgnored ="false" %> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c" %>
<%    
response.setHeader("Cache-Control","no-store"); //HTTP 1.1    
response.setHeader("Pragma","no-cache"); //HTTP 1.0    
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server    
%>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <title>Intro to jQuery Mobile</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="${applicationScope.webApp.root}/css/jquery.mobile.min.css" /> 
        <script src="${applicationScope.webApp.root}/js/jquery.min.js"></script>
        <script src="${applicationScope.webApp.root}/js/jquery.mobile.min.js"></script> 
        <style>
            body {
                background-color: rgb(221,221,221);
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="header">
                <%--占位，以免只应出现右边button时，由于左边没有button内容而致使右边button出现在左边--%>
                <a id='titleLeft' style="display:none;" data-role="button" data-theme="a" data-icon="arrow-l">Theme a</a>
                <c:if test="${requestScope.errMsg != null}">
                    <h1 id="title">${requestScope.errMsg}</h1>
                </c:if>
                <c:if test="${requestScope.errMsg == null}">
                    <h1 id="title">选择加入一起点菜</h1>
                </c:if>
                <a id='titleRight' href="callObjC://openTable?menuId=${param.menuId}" data-role="button" data-theme="a" data-icon="arrow-r">另开一桌</a>
            </div>
            <div data-role="content">
                <div class="content-primary">	
                    <ul data-role="listview" data-inset="true" data-split-icon="gear" data-split-theme="d"> 
                        <c:forEach items="${requestScope.tableList}" var="table">
                            <li>
                                <img style="position:absolute; top: 10px; left: 5px;" src="images/table.jpg" />
                                <div style="position:absolute; top: 30px; left: 100px; font-size:20px;">${table.menuName}</div>
                                <div style="position:absolute; top: 35px; right: 150px">${table.opener}&nbsp;&nbsp;&nbsp;&nbsp;${table.status}</div>
                                <div style="position:absolute; top: 15px; right: 10px;">
                                    <div data-role="controlgroup">
                                        <a href="callObjC://join?menuId=${table.menuId}&tableName=${table.tableName}&opener=${table.opener}" data-role="button">请求加入</a>
                                    </div>
                                </div>
                            </li> 
                        </c:forEach>
                    </ul> 
                </div><!--/content-primary -->
            </div><!-- /content -->
        </div><!-- /page --> 
    </body>
</html>
